<template>
  <view class="content">
    <wd-status-tip image="content" tip="暂无商品类型快去创建吧" v-if="data.typelist.length == 0" />
    <view class="info">
      <view class="info_item" v-for="(item, index) in data.typelist" :key="index">
        <view class="text bef">名称：{{ item.name }}</view>
        <view class="run">
          <view class="bian" @click="edit(item.id)">编辑</view>
          <view class="del" @click="deltype(item.id)">删除</view>
        </view>
      </view>
    </view>
    <view class="footer">
      <button @click="toadd">创建商品类型</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { err, to, toast } from '@/utils/uniapi';
import { api } from '@/api/mop_api';
const data = reactive({
  typelist: [],
  page: 1,
  size: 10,
  pageTotal: 0
});
onLoad(() => {
  data.typelist = [] as any[];
  type();
});
async function type() {
  try {
    const { page, size } = data;
    const res = await api.typelist({ page, size });
    if (res.respCode === 200) {
      const typelist = listsort(JSON.parse(res.source));
      data.typelist = data.typelist.length === 0 ? typelist : data.typelist.concat(typelist);
      data.pageTotal = res.pageTotal;
    } else {
      toast(res.msg);
    }
  } catch (error) {
    err(error);
    throw error;
  }
}
function listsort(arr: any) {
  arr.sort((a: { sort: number }, b: { sort: number }) => b.sort - a.sort);
  return arr;
}
function toadd() {
  to('/dj/addtype/addtype');
}
async function edit(e: string) {
  to('/dj/addtype/addtype?id=' + e);
}
async function deltype(e: any) {
  try {
    uni.showModal({
      title: '提示',
      content: '你确定删除该商品类型吗？',
      complete: async (res: any) => {
        if (res.confirm) {
          const ress: any = await api.typedel({ id: e });
          if (ress.respCode === 200) {
            toast('删除成功');
            (data.typelist = []), (data.page = 1);
            type();
          } else {
            toast(ress.msg);
          }
        }
      }
    });
  } catch (error) {
    err(error);
    throw error;
  }
}
onReachBottom(() => {
  const { typelist, pageTotal, page } = data;
  if (typelist.length < pageTotal) {
    data.page = page + 1;
    type();
  } else {
    toast('已加载全部数据');
  }
});
</script>

<style scoped>
.info {
  width: 100%;
  padding-bottom: 100rpx;
}
.info_item {
  width: 732rpx;
  height: 116rpx;
  border-radius: 16rpx;
  opacity: 1;
  border: 2rpx solid #e5e7eb;
  margin: 0 auto;
  margin-top: 16rpx;
  padding-left: 16rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.text {
  font-size: 28rpx;
  font-weight: 500;
  color: #111827;
}
.run {
  float: right;
  overflow: hidden;
}
.bian {
  float: left;
  width: 72rpx;
  height: 46rpx;
  background: #c32136;
  border-radius: 10rpx;
  font-size: 20rpx;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  line-height: 46rpx;
  margin-right: 16rpx;
}
.del {
  float: right;
  width: 72rpx;
  height: 46rpx;
  background: #fff;
  border-radius: 10rpx;
  font-size: 20rpx;
  font-weight: 500;
  color: #c32136;
  text-align: center;
  line-height: 46rpx;
  margin-right: 28rpx;
  border: 1rpx solid #e30514;
  box-sizing: border-box;
}
.footer {
  width: 100%;
  height: 68rpx;
  position: fixed;
  bottom: 20rpx;
}
button {
  width: 732rpx;
  height: 64rpx;
  font-size: 28rpx;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  background: #e30514;
  border-radius: 40rpx;
  opacity: 1;
  color: #fff;
  padding: 0;
  line-height: 64rpx;
}
</style>
